@main-blue: #1f8bd7;
@main-cyan: #1fbfd7;
@main-red: #eb4d4a;
@tool-red: #eb4d4a;
@tool-purple: #864eea;
@table-header: #d6dee2;
@main-back: #edf1f3;
@base-border: 1px solid #d6dee2;
@base-dashed: 1px dashed #d6dee2;
@base-shadow: 0 1px 2px 0 rgba(26,48,52,0.15);
@base-font: 12px;
@middle-font: 14px;
@large-font: 16px;
@larger-font: 18px;
@black-font: #212a2e;
@base-color: #445761;
@input-color: #78909c;
@big-shadow: 0 4px 12px 0 rgba(26,48,52,0.35);
@header-shadow: 0 5px 15px 0 rgba(26,48,52,0.15);
@main-purple: #864eea;
@heiti: SimHei, sans-serif;
@warn-red: #EB4D4A;
@zongzhi-color: #f3a634;
@zongzhi-color-opacity: rgba(243,166,52,0.1);
@zongzhi-color-border: 1px solid rgba(243,166,52,0.2);
@zongzhi-color-dashed: 1px dashed rgba(243,166,52,0.2);
@case-color: #1f8bd7;
@case-color-opacity: rgba(31,193,215,0.1);
@case-color-border: 1px solid rgba(31,193,215,0.2);
@case-color-dashed: 1px dashed rgba(31,193,215,0.2);
@main-blue-hover: #1674b6;
@border-color: #b0bec5;
@map-shadow:0 4px 12px 0 rgba(0,0,0,0.3);
@chart-yellow: #f3a634;
@chart-blue: #1f8bd7;
@chart-red: #eb4d4a;
@main-green: #42a75a;
@main-red: #eb4d4a;

@map-green: #1ac098;
@map-orange: #faba25;
@map-gray: rgba(0,0,0,0.3);
@map-red: #ff334b;


body,html {
  height: 100%;
}

.laydate_box {
  box-sizing: content-box;
  * {
    box-sizing: content-box;
  }
}

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
.clearfix {
  zoom: 1;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

a {
  text-decoration: none;
}
a:link{
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
a:active{
text-decoration:none;
}


#zhgl-map {
  height: 100%;
  width: 100%;
}


#zhgl-map {
  font-family: Helvetica, Tahoma, Arial,"SimSun","PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-size: @middle-font;
  color: @base-color;

  .dis-none {
    display: none;
  }

  a {
    text-decoration: none;
  }
  a:link{
  text-decoration:none;
  }
  a:visited{
  text-decoration:none;
  }
  a:hover{
  text-decoration:none;
  }
  a:active{
  text-decoration:none;
  }

  .blue-color {
    color: @main-blue;
  }

  .zhgl-btn {
    border-radius:4px;
    outline: none;
    box-shadow: none;
    border: none;
  }

  .btn-blue {
    background: @main-blue;
    &:hover {
      background: @main-blue-hover;
    }
  }

  .zhgl-input {
    outline: none;
    border: none;
    padding: 0 12px;
    border-radius: 4px;
  }

  .chart-yellow-color {
    color:@chart-yellow;
  }

  .chart-blue-color {
    color:@chart-blue;
  }

  .chart-red-color {
    color:@chart-red;
  }

  .chart-yellow-back {
    background:@chart-yellow;
  }

  .chart-blue-back {
    background:@chart-blue;
  }

  .chart-red-back {
    background:@chart-red;
  }

  .m-l-10 {
    margin-left: 10px;
  }

  .zhgl-close {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    text-align: center;
    line-height: 12px;
    background: #c3c3c3;
      img {
        width: 8px;
        height: 8px;
      }
  }

  .search-group {
    width: 448px;
    height: 40px;
    display: flex;
    border-radius: 4px;
    position: relative;
    input {
      width: 384px;
      border: 1px solid #c0ced1;
      background: #edf1f3;
      border-radius: 4px 0 0 4px;
    }
    button {
      flex: 1 1 auto;
      border-radius: 0 4px 4px 0;
    }
    .zhgl-close {
      position: absolute;
      right: 76px;
      top: 12px;
      cursor: pointer;
    }
  }
  .tab-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    color: @input-color;
    li {
      cursor: pointer;
      position: relative;
      text-align: center;
    }
  }
  .tab-list-li {
    width: 90px;
    transition: color 0.2s ease-in;
    a {
      color: @input-color;
    }
    color:@input-color;
    &::after {
      content : "";
      position: absolute;
      display: inline-block;
      top:0;
      right:0;
      width: 1px;
      height: 18px;
      background: @border-color;
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
  }
  .tab-active {
    color : @main-blue;
  }

  .zhgl-map-form {
    width:385px;
    .form-group {
      margin:0 0 8px 0;
    }
    .form-control {
      width: 100px;
      height: 26px;
      padding: 2px 6px;
      color: #78909c;
      font-size: @base-font;
      border: 1px solid #b0bec5;
    }
    .zhgl-map-form-label {
      width: 60px;
      font-size: 12px;
      color: #445761;
      font-weight: normal;
      display: inline-flex;
      position: relative;
      justify-content:space-between;
      text-align:justify;
      &::after {
        content: "：";
        position: absolute;
        right:0;

      }
    }
    .form-row {
      margin:0 0 8px 0;
    }
    .form-footer {
      margin: 16px 0 16px 0;
      button {
        margin-left: 6px;
        float: right;
      }
    }
  }

  .zhgl-btn-middle {
    width: 100px;
    height: 26px;
    border-radius: 3px;
    padding: 2px 12px;
    font-family: @heiti;
  }
  .zhgl-btn-large {
    width: 130px;
    height: 30px;
    border-radius: 3px;
    padding: 2px 12px;
    font-family: @heiti;
  }

  .zhgl-btn-blue {
    background: @main-blue;
    color: white;
    &:hover{
      background: @main-blue-hover;
    }
  }
  .zhgl-btn-red {
    background: @main-red;
    color: white;
    border: 1px solid @main-red;
    &:hover{
      background: @main-red;
    }
  }
  .zhgl-btn-blue-white {
    background: white;
    color: @main-blue;
    border: 1px solid @main-blue;
    &:hover {
      background: @main-blue;
      color: white;
    }
  }
}
